<template>
  <div :class="['pui-tree-children']">
    <div class="pui-tree-children_content">
      <div
        v-for="(item, i) in dataList"
        class="pui-tree-children_content-list"
        :key="item.value"
        :class="{ 'hasChild': item?.children?.length }"
      >
        <div
          :class="[
            'pui-tree-children_content-item',
            isOpen(item.value) && 'is-open',
            componentRef.currentIndex === i && item.bg && 'active-tree-item',
          ]"
        >
          <div :class="['item']" @click="onNodeClick(item, i)">
            <pui-icon class="arrow" :name="isOpen(item.value) ? 'double-arrow-down' : 'double-arrow-right'" v-if="item.children"></pui-icon>
            <pui-icon :name="item.children && item.children.length > 0 ? 'folder-open' : 'new-file'"></pui-icon>
            <span class="name" :title="item?.label">{{ item?.label }}</span>
            <span class="tip" v-if="item.tip" :title="item?.tip">{{ item.tip }}</span>
          </div>
        </div>
        <pui-collapse>
          <template v-if="isOpen(item.value)">
            <div class="p-l-20">
              <pui-tree-children v-bind="$props" :dataList="item.children" @onNodeClick="onNodeChildClick"></pui-tree-children>
            </div>
          </template>
        </pui-collapse>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'pui-tree-children',
});
</script>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import type { BaseOptions, Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  show: false,
});

const emits = defineEmits<{
  'update:selectIds': [val: string[]];
  'onNodeClick': [val: any];
}>();

const componentRef = reactive({
  activeItem: {},
  currentIndex: null as null | number,
});

if (props.show && props.dataList) {
  props.dataList.map((item: any) => {
    props.selectIds?.push(item.value);
    emits('update:selectIds', props.selectIds as string[]);
  });
}
// 展开收起方法
const toggleItem = (item: BaseOptions) => {
  const { value, children = [] } = item;
  if (children.length) {
    const findIndex = props.selectIds?.findIndex((id) => value === id);
    if (typeof findIndex === 'number' && findIndex > -1) {
      props.selectIds?.splice(findIndex, 1);
    } else {
      props.selectIds?.push(value as string);
    }
    emits('update:selectIds', props.selectIds as string[]);
  }
};

const onNodeClick = (item: BaseOptions, i: number | null) => {
  componentRef.activeItem = item;
  if (item.children?.length) {
    toggleItem(item);
    componentRef.currentIndex = i;
  } else {
    componentRef.currentIndex = null;
  }
  if (item.fn) {
    item.fn();
  }
  emits('onNodeClick', item);
};

const onNodeChildClick = (item: any) => {
  emits('onNodeClick', item);
};

// 判断是否展开
const isOpen = (id: Number | String) => {
  return !!props.selectIds?.find((item) => id === item);
};
</script>
